<script setup>
import {onMounted, onUnmounted, ref, watch} from 'vue';
import request from "@/utils/request";
import {useRouter} from 'vue-router';

const tableData = ref([]);
const total = ref(0);
const dialogVisible1 = ref(false)

// 数据监控器
// watch(total, (newValue, oldValue) => {
//   console.log(newValue)
//   console.log(oldValue)
// })

const keyword = ref('');
const queryByKeyWord = async () => {
  var response = await request.get("/crew_job/pagination_query?inputKeyword=" + keyword.value + "&page=" + 1 + "&per_page=" + 7);
  tableData.value = response.data;
  total.value = response.pagination.total;
  if (response.pagination.total == 0) {
    ElMessage('未查询到数据');
  }
}

const resetTable = () => {
  tableData.value = [];
  keyword.value = '';
}

const importBtn = () => {
  ElNotification({
    title: '提示',
    message: h('i', {style: 'color: teal'}, '导入只接受*.xlsx格式的数据！'),
    type: 'info'
  })
}

const handleCurrentChange = async (num) => {
  const count = await request('/crew_job/count');
  if (total.value != count) {
    //搜索之后进行页码切换。
    const response = await request.get("/crew_job/pagination_query?inputKeyword=" + keyword.value + "&page=" + 1 + "&per_page=" + 7);
    tableData.value = response.data;
    total.value = response.pagination.total
  } else {
    //未进行搜索，页码切换。
    const response2 = await request.get("/crew_job/pagination?page=" + num + "&per_page=" + 7);
    tableData.value = response2.data;
  }
}

const exportBtn = () => {
  window.open("http://localhost:10029/table/export_default")
}

const router = useRouter();

const timeline_data_list = ref([])
const showDataLine = async (row) => {
  dialogVisible1.value = true
  const response = await request('/crew_job/timeline?cardid=' + row.cardid)
  console.log(response)
  timeline_data_list.value = response
}

onMounted(async () => {
  //初始化表格数据
  const response = await request.get("/crew_job/pagination?page=" + 1 + "&per_page=" + 7);
  tableData.value = response.data;
  total.value = response.pagination.total;
});

onUnmounted(() => {

})

</script>

<template>
  <div class="app-wrapper">
    <el-card style="">

      <div style="margin: 15px 0;">

        <el-input style="width: 400px;" placeholder="请输入搜索关键词" v-model="keyword" @keyup.enter.native="queryByKeyWord()">

          <template #suffix>
            <el-icon @click="keyword = ''">
              <i-ep-CloseBold/>
            </el-icon>
          </template>
        </el-input>

        <el-button style="margin-left: 5px;padding: 0 20px;" type="primary" @click="queryByKeyWord()">
          <el-icon style="vertical-align: middle; ">
            <i-ep-Search/>
          </el-icon>
          搜索
        </el-button>

        <el-button style="margin-left: 5px; padding: 0 20px;" type="warning" @click="resetTable()">
          <el-icon style="vertical-align: middle;">
            <i-ep-Refresh/>
          </el-icon>
          重置
        </el-button>
      </div>

      <!-- 导出 -->
      <!--      <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"-->
      <!--                     icon-color="#626AEF" title="即将导出船舶信息表，确定继续吗？" @confirm="exportBtn()">-->
      <!--        <template #reference>-->
      <!--          <el-button type="primary" size="large">导出表格-->
      <!--            <el-icon>-->
      <!--              <i-ep-Bottom/>-->
      <!--            </el-icon>-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-popconfirm>-->

      <el-table :data="tableData" stripe border style="width: 100%">
        <!--        <el-table-column prop="id" label="ID" width="130"/>-->
        <el-table-column prop="mmsi" label="MMSI" width="130"/>
        <el-table-column prop="shipid" label="船舶识别号" width="130"/>
        <el-table-column prop="crewname" label="船员姓名" width="110"/>
        <el-table-column prop="shipname" label="船舶名称" width="130"/>
        <el-table-column prop="shiptype" label="船舶类型" width="130"/>
        <el-table-column prop="shiplevel" label="航区" width="80"/>
        <el-table-column prop="shipduty" label="船员职位" width="130"/>
        <el-table-column prop="checkPass" label="验证通过码" width="130"/>
        <el-table-column prop="dutytime" label="任职时间" width="180"/>
        <el-table-column prop="cardid" label="身份证号" width="180"/>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="scope">
            <el-button type="success" @click="showDataLine(scope.row)">
              任职记录
              <el-icon>
                <i-ep-DataLine/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="没有找到相关数据哦。"/>
        </template>

      </el-table>

      <!-- 分页 Pagination -->
      <div style="margin: 15px 0;">
        <el-pagination background layout=" prev, pager, next" :total="total" @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>

  <!-- 修改对话栏-->
  <el-dialog
      v-model="dialogVisible1"
      title="任职时间线"
      width="800"
      :before-close="handleClose"
  >
    <el-timeline>
      <el-timeline-item v-for=" (item , index) in timeline_data_list" :key="item">
        <el-card>
          <h2 style="font-size: 20px;" > {{ item.crewname }} - {{item.shipname}} - {{item.shiptype}} - {{item.shipduty}}</h2>
          <p style="font-size: 16px;">{{ item.dutytime }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <!-- <el-empty description="NO DATA" /> -->
    <template #empty>
      <el-empty description="没有找到相关数据噢。"/>
    </template>

  </el-dialog>
</template>

<style lang="scss" scoped>
.app-wrapper {
  margin: 2% 30px;
}
</style>